{% extends 'base2.html' %}
{% block head %}
    <script>
        function total() {
            let total_all = 0, total_count = 0, total_checked = 0;
            $('.cart_list_td').each(function () {
                let price = parseFloat($(this).children('.col05').children('em').html()); //价格
                let count = parseInt($(this).find('.num_show').val());//数量
                let small_total = price * count; //小计
                if ($(this).children('.col01').children('input').prop('checked')) {
                    //如果选中
                    total_all += small_total;
                    total_checked++;
                }
                total_count++;
                $(this).children('.col07').html(small_total.toFixed(2) + '元');//每一个购物车的小计
            })
            $('.settlements .col03 em').html(total_all.toFixed(2));//总价
            $('.settlements .col03 b').html(total_checked);//选中的购物车数量
            $('.total_count em').html(total_count);//一共多少商品
        }
        $(function () {
            total()
            //全选,全消除
            {#根据全选框的状态决定各商品项的状态是不是被选中#}
            $('#check_all').click(function () {
                let checked = $(this).prop('checked');
                $('input[type=checkbox]:not(#check_all)').prop('checked', checked);
                total();
            })
            //选中或取消
            {#选了全选之后也可以自己取消一部分商品，这时全选按钮就自动取消不选#}
            {#比较初全选框外的所有框和全选框外所有被选中的数量，如果一致则说明是全选状态，全选框打钩，不一致说明不是全选，全选框取消打钩#}
            $('input[type=checkbox]:not(#check_all)').click(function () {
                let len1 = $(':checkbox:not(#check_all)').length;//当前页面中除了全选之外的所有checkbox
                let len2 = $(':checked:not(#check_all)').length; //当前页面中除了全选之外的所有选中的checkbox
                $('#check_all').prop('checked', len1 === len2);
                total();
            })

            //数量控制
            $('.add').click(function () {
                let num = parseInt($(this).next().val());
                num++;
                $(this).next().val(num).blur();
            })
            $('.minus').click(function () {
                let num = parseInt($(this).prev().val());
                num--;
                $(this).prev().val(num).blur();
            })
            $('.num_show').blur(function () {
                let num = parseInt($(this).val());
                if (isNaN(num) || num <= 1) {
                    num = 1;
                }
                if (num >= 100) {
                    num = 100
                }
                $(this).val(num);
                let cid = $(this).parent().parent().prevAll().find('input').val();
                $.get('/cart/edit/', {'cid': cid, 'count': num}, function (data) {
                    {#location.href = '/cart/'#}
                })
                total();
            })
            //删除操作
            $('.remove').click(function () {
                let cid = $(this).parent().prevAll().find('input').val();
                $.get('/cart/remove/', {'cid': cid}, function (data) {
                    location.href = '/cart/'
                })
            })


        })
    </script>
{% endblock %}
{% block content %}
    <div class="total_count">全部商品<em>2</em>件</div>
    <ul class="cart_list_th clearfix">
        <li class="col01">商品名称</li>
        <li class="col02">商品单位</li>
        <li class="col03">商品价格</li>
        <li class="col04">数量</li>
        <li class="col05">小计</li>
        <li class="col06">操作</li>
    </ul>

    <form action="/order/">
        {% for cart in clist %}
            <ul class="cart_list_td clearfix">
                <li class="col01"><input type="checkbox" name="cid" checked="checked" value="{{ cart.id }}"></li>
                <li class="col02"><img src="/static/images/{{ cart.goods.gpic }}"></li>
                <li class="col03">{{ cart.goods.gtitle }}<br><em>{{ cart.goods.gprice }}元/{{ cart.goods.gunit }}</em></li>
                <li class="col04">{{ cart.goods.gunit }}</li>
                <li class="col05"><em>{{ cart.goods.gprice }}</em>元</li>
                <li class="col06">
                    <div class="num_add">
                        <a href="javascript:;" class="add fl">+</a>
                        <input type="text" class="num_show fl" value="1">
                        <a href="javascript:;" class="minus fl">-</a>
                    </div>
                </li>
                <li class="col07">{{ cart.goods.gprice }}元</li>
                <li class="col08"><a href="javascript:;" class="remove">删除</a></li>
            </ul>


        {% endfor %}

        <ul class="settlements">
            <li class="col01"><input type="checkbox" name="" checked="checked" id="check_all"></li>
            <li class="col02">全选</li>
            <li class="col03">合计(不含运费)：<span>¥</span><em>42.60</em><br>共计<b>2</b>件商品</li>
{#            <li class="col04"><a href="place_order.html">去结算</a></li>#}
            <li class="col04"><input type="submit" value="去结算"></li>
        </ul>
    </form>

{% endblock %}